<template>
    <div v-if="Object.keys(shopInfo).length>0" class="shop-info">
        <div class="shop-logo">
            <img :src="shopInfo.logo" alt="">
            <span>{{shopInfo.name}}</span>
        </div>
        <div class="shop-base">
            <div class="shop-counter">
                <div>
                    <div>{{bigSell}}</div>
                    <span>总销量</span>
                </div>
                <div>
                    <div>{{shopInfo.cGoods}}</div>
                    <span>全部宝贝</span>
                </div>
            </div>
            <div>
                <div :class="{'is-better-score':item.isBetter}" class="shop-score" v-for="(item,key) in shopInfo.score" :key="key">
                    <span>{{item.name}}</span>
                    <span>{{item.score}}</span>
                    <span>{{item.isBetter?"高":"低"}}</span>
                </div>
            </div>
        </div>
        <div class="go-shop">
            <a href="javascript:;">进店逛逛</a>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            shopInfo:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        computed:{
            bigSell(){
                const sells = parseInt(this.shopInfo.sells)
                if(sells>10000){
                    return (sells/10000).toFixed(2) + "万"
                }
                return sells
            }
        }
    }
</script>

<style scoped>
    .shop-info{
        padding: 15px 10px;
        border-bottom: 4px solid rgba(100, 100, 100, .1);
    }
    .shop-logo{
        height: 3.5rem;
        line-height: 3.5rem;
        display: flex;
        justify-content: flex-start;
    }
    .shop-logo img{
        height: 4rem;
        border-radius: 2rem;
        border: 1px solid rgba(100, 100, 100, .1);
        margin-right: 10px;
    }
    .shop-logo span{
        color: var(--color-text)
    }
    .shop-base{
        margin:10px 0px;
    }
    .shop-base,.shop-counter,.shop-score{
        display: flex;
        justify-content: space-around;
    }
    .shop-base>div{
        flex: 1;
    }
    .shop-counter{
        border-right: 1px solid rgba(100, 100, 100, .1);
        text-align: center;
        line-height: 100%;
        align-items:center;
        color: #444;
    }
    .shop-counter>div>div{
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    .shop-score{
        padding: 0 20px;
        justify-content: space-between;
        font-size: .85rem;
        margin-bottom: 5px;
    }
    .shop-score :nth-child(2){
        color: #1abc9c;
    }
    .shop-score :nth-child(3){
        background: #1abc9c;
        color: #fff;
    }

    .is-better-score :nth-child(2){
        color: #e74c3c;
    }
    .is-better-score :nth-child(3){
        background: #e74c3c;
        color: #fff;
    }
    .go-shop{
        text-align: center
    }   
    .go-shop a{
        display: inline-block;
        background-color: rgba(100, 100, 100, .1);
        padding:10px 30px;
        border-radius: 10px;
        margin: 20px 0;
        font-size: .85rem;
    }
</style>